<template>
    <div class="container">
        <div class="left innerBox" ref="leftEchartRef"></div>
        <div class="middle innerBox" ref="middleEchartRef"></div>
        <div class="right innerBox" ref="rightEchartRef"></div>
    </div>
</template>

<script>
import echarts from 'echarts'
export default {
  name: 'Welcom',
  mounted () {
    const myChartLeft = echarts.init(this.$refs.leftEchartRef)
    myChartLeft.setOption(this.optionLeft)
  },
  data () {
    return {
      // 左侧饼状图配置数据
      optionLeft: {
        darkMode: 'auto',
        color: ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452'],
        legend: {
          top: 'bottom'
        },
        series: [
          {
            name: '面积模式',
            type: 'pie',
            radius: [30, 170],
            center: ['50%', '50%'],
            roseType: 'area',
            itemStyle: {
              borderRadius: 8
            },
            data: [
              { value: 40, name: '食品' },
              { value: 38, name: '服装' },
              { value: 32, name: '鞋帽' },
              { value: 30, name: '日用品' },
              { value: 28, name: '家居' },
              { value: 26, name: '电器' }
            ]
          }
        ]
      },
      // 中间菱形图配置数据
      option: {
        title: {
          text: '漏斗图',
          subtext: '纯属虚构'
        },
        tooltip: {
          trigger: 'item',
          formatter: "{a} <br/>{b} : {c}%"
        },
        toolbox: {
          feature: {
            dataView: {readOnly: false},
            restore: {},
            saveAsImage: {}
          }
        },
        legend: {
          data: ['展现','点击','访问','咨询','订单']
        },
        series: [
            {
              name: '预期',
              type: 'funnel',
              left: '10%',
              width: '80%',
              label: {
                formatter: '{b}预期'
              },
              labelLine: {
                show: false
              },
              itemStyle: {
                opacity: 0.7
              },
              emphasis: {
                label: {
                  position: 'inside',
                  formatter: '{b}预期: {c}%'
                }
              },
              data: [
                { value: 60, name: '访问' },
                { value: 40, name: '咨询' },
                { value: 20, name: '订单' },
                { value: 80, name: '点击' },
                { value: 100, name: '展现' }
              ]
            },
            {
              name: '实际',
              type: 'funnel',
              left: '10%',
              width: '80%',
              maxSize: '80%',
              label: {
                position: 'inside',
                formatter: '{c}%',
                color: '#fff'
              },
              itemStyle: {
                opacity: 0.5,
                borderColor: '#fff',
                borderWidth: 2
              },
              emphasis: {
                label: {
                  position: 'inside',
                  formatter: '{b}实际: {c}%'
                }
              },
              data: [
                { value: 30, name: '访问' },
                { value: 10, name: '咨询' },
                { value: 5, name: '订单' },
                { value: 50, name: '点击' },
                { value: 80, name: '展现' }
              ],
              // Ensure outer shape will not be over inner shape when hover.
              z: 100
            }
        ]
      }
    }
  }
}
</script>

<style lang="less" scoped>
.container {
    display: flex;
    justify-content: space-around;
    .innerBox {
        width: 500px;
        height: 450px;
        border-radius: 20px;
        background-color: #fff;
    }

}
</style>
